<template>
  <div class="hello">
    <h1 class="left">{{ propsMsg.msg }} {{ propsMsg.name }} {{ homeInput }}</h1>
    <div class="right">
      <el-button type="primary" plain @click="toElement">Element-Plus</el-button>
      <slot name="backBtn"></slot>
    </div>
  </div>
</template>

<script>
// eslint-disable-next-line
import { computed, inject, onMounted, getCurrentInstance } from 'vue'
import store from '@/store/index'
import router from '@/router/index'
import { ElMessage } from 'element-plus'
export default {
  name: 'HelloWorld',
  props: {
    propsMsg: {
      type: Object,
      require: true
    }
  },
  setup() {
    const homeInput = computed(() => {
      return store.state.homeInput
    })
    const toElement = () => {
      router.push({ name: 'ElementIndex' })
    }
    ElMessage.success(inject('provideData'))
    onMounted(() => {
      // const { ctx } = getCurrentInstance()
      // ctx.$message.success(inject('provideData'))
      // console.log(inject('provideData'))
    })
    return {
      homeInput,
      toElement
    }
  }
}
</script>
<style lang="scss">
.hello {
  display: flex;
  height: 84px;
  line-height: 84px;
  background: #2f71f5;
  .left {
    background: #2f71f5;
    min-width: 300px;
    width: 300px;
    color: #fff;
    font-size: 24px;
  }
  .right {
    flex-grow: 1;
    align-items: center;
    display: flex;
    justify-content: flex-end;
    margin-right: 30px;
    .el-button {
      margin-right: 20px;
    }
    img {
      margin-right: 20px;
    }
  }
}
</style>
